<template>
    <view>
        <u-popup :show="currentShow" :overlay="overlay" :mode="mode" :duration="duration" :closeable="closeable"
            :overlayStyle="overlayStyle" :overlayOpacity="overlayOpacity" :closeOnClickOverlay="closeOnClickOverlay"
            :zIndex="zIndex" :safeAreaInsetBottom="safeAreaInsetBottom" :safeAreaInsetTop="safeAreaInsetTop"
            :closeIconPos="closeIconPos" :round="round" :zoom="zoom" :bgColor="bgColor" @close="handleClose"
            @open="handleOpen">
            <view class="py-popup-content">
                <slot></slot>
            </view>
            <view class="py-popup-form" v-if="title">
                <view class="py-popup-form-title">
                    <u--text :text="title"></u--text>
                </view>
                <u-line></u-line>
                <view class="py-popup-form-content">
                    <slot name="form"></slot>
                </view>
            </view>

        </u-popup>
    </view>
</template>
<script>
    export default {
        name: "PyPopup",
        props: {
            // 新增属性开始
            // 使用form插槽时生效
            title: {
                type: String,
                default: ""
            },
            // 新增属性结束
            // u-popup自带属性开始
            // 是否展示弹窗
            show: {
                type: Boolean,
                default: uni.$u.props.popup.show
            },
            // 是否显示遮罩
            overlay: {
                type: Boolean,
                default: uni.$u.props.popup.overlay
            },
            // 弹出的方向，可选值为 top bottom right left center
            mode: {
                type: String,
                default: uni.$u.props.popup.mode
            },
            // 动画时长，单位ms
            duration: {
                type: [String, Number],
                default: uni.$u.props.popup.duration
            },
            // 是否显示关闭图标
            closeable: {
                type: Boolean,
                default: uni.$u.props.popup.closeable
            },
            // 自定义遮罩的样式
            overlayStyle: {
                type: [Object, String],
                default: uni.$u.props.popup.overlayStyle
            },
            // 点击遮罩是否关闭弹窗
            closeOnClickOverlay: {
                type: Boolean,
                default: uni.$u.props.popup.closeOnClickOverlay
            },
            // 层级
            zIndex: {
                type: [String, Number],
                default: uni.$u.props.popup.zIndex
            },
            // 是否为iPhoneX留出底部安全距离
            safeAreaInsetBottom: {
                type: Boolean,
                default: uni.$u.props.popup.safeAreaInsetBottom
            },
            // 是否留出顶部安全距离（状态栏高度）
            safeAreaInsetTop: {
                type: Boolean,
                default: uni.$u.props.popup.safeAreaInsetTop
            },
            // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
            closeIconPos: {
                type: String,
                default: uni.$u.props.popup.closeIconPos
            },
            // 是否显示圆角
            round: {
                type: [Boolean, String, Number],
                default: uni.$u.props.popup.round
            },
            // mode=center，也即中部弹出时，是否使用缩放模式
            zoom: {
                type: Boolean,
                default: uni.$u.props.popup.zoom
            },
            // 弹窗背景色，设置为transparent可去除白色背景
            bgColor: {
                type: String,
                default: uni.$u.props.popup.bgColor
            },
            // 遮罩的透明度，0-1之间
            overlayOpacity: {
                type: [Number, String],
                default: uni.$u.props.popup.overlayOpacity
            }
        },
        data() {
            return {
                // 当前是否显示弹出层
                currentShow: false,

                // 由于第一次打开时，会调用关闭函数
                // 关闭次数
                closeCount: 0,

                // #ifdef H5
                // 由于打开时，会调用关闭函数
                // 是否打开导致的关闭操作
                hasOpen: false
                // #endif
            }
        },
        watch: {
            show: function (newVal, oldVal) {
                // #ifdef H5
                this.hasOpen = newVal;
                // #endif
                this.currentShow = newVal;
            }
        },
        methods: {
            // 处理关闭操作
            handleClose(e) {
                // #ifdef H5
                // H5打开时，mode为bottom，会调用关闭函数
                // 不是打开导致调用关闭操作
                if (!this.hasOpen && this.mode == "bottom") {
                    this.currentShow = false;
                    this.$emit("close");
                } else if (this.mode != "bottom") {
                    this.currentShow = false;
                    this.$emit("close");
                }
                this.hasOpen = false;
                // #endif

                // #ifdef MP-WEIXIN || APP-PLUS
                this.currentShow = false;
                this.$emit("close");
                // #endif


            },

            // 处理打开操作
            handleOpen() {
                this.$emit("open");
            }
        },
    }
</script>
<style lang="css" scoped>
    .py-popup-content {
        max-height: 80vh;
        overflow-x: auto;
    }

    .py-popup-form {
        margin: 10px 0;
        width: calc(100vw - 40px);
    }

    .py-popup-form-title {
        margin-left: 5px;
        margin-bottom: 10px;
    }

    .py-popup-form-content {
        margin: 5px 10px;
    }
</style>